<template>
	<div id="actiNew" v-cloak>

		<!--工具条-->
		<div name="searchColums" id="searchColums">
			<el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
				<el-form-item class="el-form-item" label="发送人名称">
					<el-input v-model="filters.name" name="fromUser" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>

				<span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getTasks(true)">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
			</el-form>
		</div>
		<!--列表-->
		<el-table :data="taskDatas" id="datagrid" empty-text=" " height="410" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="title" label="标题"  show-overflow-tooltip></el-table-column>
			<el-table-column prop="fromUser" label="发送人" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="opinion" label="审批意见" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="createTime" label="审批时间" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleBanli(scope.$index, scope.row)">详情信息</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		
		<!--详情界面-->
		<el-dialog title="详情信息" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<feeapply ref="form" :pid="pid"></feeapply>
			<el-form  label-width="120px"  ref="spForm" size="mini">
				<el-form-item :label="item.taskName" v-for="item in Opinions" :key="item.taskId" >
					<el-input v-model="item.opinion" disabled></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'
	import {mapGetters,mapState} from "vuex";
	import { fetchDeptTree, deptCommunityList } from '@/api/role'
	import feeapply from '../acti/feeapply.vue';
	export default {
		name: 'table_community_info',
		components: {
		    feeapply
		},
		data() {
			return {
				treeDeptData: [],
				checkedKeys: [],
				filters: {
					name: ''
				},
				url: {
					list: '/acti/process/showCompleteTaskList'
				},
				taskDatas: [],
				fileList: [],
				Opinions:[],
				taskId:"",
				total: 0,
				pid:'',
				opNameVisible:false,
				smsWarnFlag:false,
				page: 1,
				pageSize: 10,
				sort: {
					sort: 'sort',
					order: 'asc'
				},
				listLoading: false,
				sels: [], //列表选中列
				dialogDeptVisible: false,
				editLoading: false,
				dialogStatus: '',
				process_engine:"",
				addFormVisible: false, //新增界面是否显示
				addLoading: false
			}
		},

		methods: {
			handleSortChange(sort) {
				this.sort = {
					sort: sort.prop,
					order: sort.order == 'ascending' ? 'asc' : 'desc'
				};
				this.getTasks();
			},
			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex
			},
			headStyle({
				row,
				rowIndex
			}) {
				return "table_head_style";
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTasks();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.page = 1;
				this.getTasks();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			resetSearchForm(forName) {
				this.filters = {
					name: ''
				}
			},
			//获取用户列表
			getTasks(flag) {
				if(flag){
					this.page = 1;
				}
				let para = {
					params: {
						page: this.page,
						limit: this.pageSize,
						userId:this.userInfo.userId
					}
				};
				this.listLoading = true;
				request.get(this.url.list, para).then((res) => {
					this.total = res.data.count;
					var datas = res.data.data;
					this.taskDatas = datas;
					this.listLoading = false;
				});
			},
			//显示审批界面
			handleBanli: function(index, row) {
				this.addFormVisible = true;
				var table = row.fromTable;
				this.taskId = row.id;
				var fromId = row.fromId;
				if(table=="fee_apply_record"){
					this.pid = fromId;
					this.Opinions = row.opinionVoList;
					this.$nextTick(()=>{
						this.$refs['form'].initData();
					})
				}
			},
			selsChange: function(sels) {
				this.sels = sels;
			}
		},
		mounted() {
			this.getTasks();
		},
		computed: {
      		...mapGetters(["permissions"]),
      		...mapState({
      			userInfo: state => state.user.userInfo
      		})
    	},
    	created() {
      		this.smsWarnFlag = this.permissions["sys_user_smswarn"];
    	}
	};
</script>